<template>

  <div>
    <!-- 查询条件 -->
    <el-form :inline="true">

      <el-form-item label="标题">
        <el-input v-model="searchMap.title" placeholder=""></el-input>
      </el-form-item>

      <el-form-item label="维修单号">
        <el-select v-model="searchMap.repairNum" filterable placeholder="请选择">
          <el-option v-for="repairReport in repairReportList" :key="repairReport.repairNum"
            :label="repairReport.repairNum" :value="repairReport.repairNum">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态：">
        <el-radio-group v-model="searchMap.status">
          <el-radio-button label="1">维修中</el-radio-button>
          <el-radio-button label="2">待维修</el-radio-button>
          <el-radio-button label="3">暂停中</el-radio-button>
          <el-radio-button label="4">已完成</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="reset()">重置</el-button>
    </el-form>

    <el-button @click="Add()" type="primary" size="small">添加</el-button>

    <!-- 表格 -->
    <el-table :data="list" border style="width: 100%">
      <!-- 设置是否保留选择 -->
      <el-table-column type="selection" fixed width="50" :reserve-selection="true">
      </el-table-column>
      <!-- 序号列 -->
      <el-table-column fixed prop="id" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column fixed prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <el-button plain :type="getButtonType(scope.row.status)">
            {{ getButtonText(scope.row.status) }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="repairNum" label="维修单号">
      </el-table-column>
      <el-table-column prop="title" label="标题">
      </el-table-column>
      <el-table-column prop="assetReportNum" label="报修单号">
      </el-table-column>
      <el-table-column prop="applicantName" label="申请人">
      </el-table-column>
      <el-table-column prop="departName" label="申请部门">
      </el-table-column>
      <el-table-column prop="repariDetal" label="报修内容">
      </el-table-column>
      <el-table-column prop="vendorName" label="维保厂商">
      </el-table-column>
      <el-table-column prop="name" label="联系人">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式">
      </el-table-column>
      <el-table-column prop="repariDetal" label="报修内容">
      </el-table-column>
      <el-table-column prop="startTime" label="预计处理开始时间" :formatter="dataFormat" width="160">
      </el-table-column>
      <el-table-column prop="endTime" label="预计处理结束时间" :formatter="dataFormat" width="160">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
      <el-table-column prop="assetId" label="维修资产明细">
        <template slot-scope="scope">
          <el-button @click="getDetail(scope.row.repairNum)" type="text" size="small">查看明细</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="创建人">
      </el-table-column>
      <el-table-column prop="created" label="创建时间" :formatter="dataFormat" width="160">
      </el-table-column>


      <el-table-column fixed="right" label="操作" width="80">
        <template slot-scope="scope">
          <el-button @click="Edit(scope.row.repairNum)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[1, 10, 20, 30, 50, 100]"
      :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>


    <!--详情页面弹窗-->
    <el-dialog title="设备故障报修单" :visible.sync="dialogFormVisible" width="1000px">
      <el-form label-width="80px" :inline="true">
        <!-- 查询条件 -->
        <el-form-item label="资产编码">
          <el-input v-model="searchMap.assetCode" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="searchMap.assetName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="searchMap.assetModel" placeholder=""></el-input>
        </el-form-item>
        <div style="margin: 0 auto; width: fit-content;">
          <el-button type="primary" @click="getDetail(searchMap.assetReportNum)">查询</el-button>
          <el-button type="primary" @click="reset()">重置</el-button>
        </div>
      </el-form>
      <!-- 表格 -->
      <el-table :data="detailList" border style="width: 100%">
        <!-- 设置是否保留选择 -->
        <el-table-column type="selection" fixed width="50" :reserve-selection="true">
        </el-table-column>
        <!-- 序号列 -->
        <el-table-column fixed prop="id" label="序号" width="50">
        </el-table-column>

        <el-table-column prop="number" label="资产编码">
        </el-table-column>
        <el-table-column prop="assetName" label="资产名称">
        </el-table-column>
        <el-table-column prop="model" label="规格型号">
        </el-table-column>
        <el-table-column prop="assetCategoryName" label="资产分类">
        </el-table-column>
        <el-table-column prop="unit" label="单位">
        </el-table-column>
        <el-table-column prop="adminName" label="管理人">
        </el-table-column>
        <el-table-column prop="userName" label="使用人">
        </el-table-column>
        <el-table-column prop="nowStorageLocationName" label="存放地点">
        </el-table-column>
        <el-table-column prop="assetStatus" label="状态">
          <template slot-scope="scope">
            {{ getAssetStatusText(scope.row.assetStatus) }}
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination @size-change="detailSizeData" @current-change="detailPageData"
        :page-sizes="[1, 10, 20, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="detailCount">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import repairReportService from "@/api/repair-record";
//导入日期组件
import moment from 'moment'

export default {
  data() {
    return {
      //页面数据
      list: [],
      //查询条件
      searchMap: {
        page: 1,
        limit: 10
      },
      checked: true,
      count: 0,
      detailCount: 0,
      // 选中行
      selectedRows: [],
      // 是否全选
      checkAll: false,
      // 是否部分选中
      isIndeterminate: false,
      repairReportList: [],
      //默认选中
      radio1: '',
      detailList: [],
      dialogFormVisible: false,
    };
  },
  // 在组件创建时调用
  created() {
    this.fetchData();
    this.getAssetReportList();
  },
  methods: {
    Edit(repairNum) {
      console.log('传给编辑页面的单号', repairNum)
      this.$router.push({ name: 'RepairRecordEdit', query: { repairNum: repairNum } });
    },
    Add() {
      this.$router.push({ name: 'RepairRecordAdd' });
    },
    fetchData() {
      repairReportService.list(this.searchMap)
        .then(response => {
          this.list = response.data;
          this.count = response.count;
        })
    },
    getButtonType(status) {
      // 根据状态返回按钮类型
      switch (status) {
        case 1:
          return 'warning';
        case 2:
          return 'primary';
        case 3:
          return 'danger';
        case 4:
          return 'success';
        default:
          return 'info';
      }
    },
    getButtonText(status) {
      // 根据状态返回按钮文本
      switch (status) {
        case 1:
          return '维修中';
        case 2:
          return '待维修';
        case 3:
          return '暂停中';
        case 4:
          return '已完成';
        default:
          return '未知状态';
      }
    },
    getAssetStatusText(status) {
      // 根据状态返回按钮文本
      switch (status) {
        case 1:
          return '使用';
        case 2:
          return '闲置';
        case 3:
          return '借用';
        case 4:
          return '调拨';
        default:
          return '未知状态';
      }
    },
    // 获取资产报告列表
    getAssetReportList() {
      repairReportService.findAll().then(response => {
        this.repairReportList = response.data;
      });
    },
    reset() {
      if (this.searchMap.assetReportNum === '') {
        this.searchMap = {};
      } else {
        this.searchMap = {
          assetReportNum: this.searchMap.assetReportNum
        };
      }
    },
    getDetail(assetReportNum) {
      this.searchMap.assetReportNum = assetReportNum;
      repairReportService.findDetail(this.searchMap).then(response => {
        this.detailList = response.data;
        this.detailCount = response.count;
        this.dialogFormVisible = true;

      });
    },


    //增加一个格式化日期的方法
    dataFormat(row, column) {
      let date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD hh:mm:ss')
    },

    //分页
    //当页面大小改变的时候调用此方法，传递改变的页面大小
    sizeData(size) {
      this.searchMap.limit = size
      this.fetchData()
    },
    pageData(page) {
      this.searchMap.page = page
      this.fetchData()
    },
    detailSizeData(size) {
      this.searchMap.limit = size
      this.getDetail(this.searchMap.assetReportNum)
    },
    detailPageData(page) {
      this.searchMap.page = page
      this.getDetail(this.searchMap.assetReportNum)
    },
    
  }
}
</script>
